<template>
  <div class="box">
    <el-descriptions
      class="margin-top"
      title="普通任务详情"
      :column="3"
      :size="size"
      border
    >
      <template #extra>
        <el-button type="primary" @click="editlist">修改任务 </el-button>
        <el-button type="primary" @click="dellist">删除任务 </el-button>
      </template>
      <div v-if="flog == 0">
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">任务标题</div>
          </template>
          {{ list.tableData.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              {{ list.tableData.author }}
            </div>
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">开始时间</div>
          </template>
          {{ list.tableData.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">任务状态</div>
          </template>
          <el-tag size="small">{{ list.tableData.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">紧要程度</div>
          </template>
          {{ list.tableData.type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">完成进度</div>
          </template>
          {{ list.tableData.ing }}
        </el-descriptions-item>
      </div>
    </el-descriptions>
    <!-- 评论内容 -->
    <div>
      <h3>评论记录</h3>
      <div class="pl" v-for="(item, index) in pllist.pl" :key="index">
        <div class="shang">
          <div class="demo-basic--circle left">
            <div class="block">
              <el-avatar :size="30" :src="circleUrl" />
            </div>
          </div>
          <span class="name">{{ item.author }}</span>
          <p class="delpl" @click="delpllist(item.id)">删除评论</p>
        </div>
        <div class="content">
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
    <!-- 输入评论内容 -->
    <div class="bottom">
      <el-input v-model="input" placeholder="请输入评论内容" />
      <el-button type="primary" class="plbtn" @click="add">评论</el-button>
    </div>
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" title="修改任务" width="500px">
      <el-form :model="form" label-width="">
        <el-form-item label="任务标题">
          <el-input v-model="form.title" placeholder="请输入任务标题" />
        </el-form-item>
        <el-form-item label="负责人员">
          <el-input v-model="form.author" placeholder="请输入负责人员" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="form.createTime"
            type="datetime"
            placeholder="选择开始时间"
            :default-time="defaultTime"
          />
        </el-form-item>
        <el-form-item label="紧要程度">
          <el-radio-group v-model="form.type">
            <el-radio label="重要" value="重要" />
            <el-radio label="紧急" value="紧急" />
            <el-radio label="普通" value="普通" />
            <el-radio label="重要且紧急" value="重要且紧急" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select v-model="form.status" placeholder="选择任务状态">
            <el-option label="未开始" value="未开始" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已取消" value="已取消" />
          </el-select>
        </el-form-item>
        <el-form-item label="完成程度">
          <el-select v-model="form.ing" placeholder="选择完成程度">
            <el-option label="0%" value="0%" />
            <el-option label="25%" value="25%" />
            <el-option label="50%" value="50%" />
            <el-option label="75%" value="75%" />
            <el-option label="100%" value="100%" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="edit"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from "@element-plus/icons-vue";
import {
  getlistdetail,
  geteditlist,
  delList,
  getcommentlist,
  addpl,
  delpl,
} from "../../../api/api";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, toRefs } from "vue";

// 评论框的内容
const input = ref("");

const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  squareUrl:
    "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
  sizeList: ["small", "", "large"] as const,
});

const { circleUrl, squareUrl, sizeList } = toRefs(state);

const route = useRoute();

// 默认时间
const defaultTime = new Date(2000, 1, 1, 12, 0, 0);

// 判断弹框是否打开
const dialogFormVisible = ref(false);

// 是否显示任务详情’
const flog = ref(0);

// 默认宽度
const formLabelWidth = "140px";

interface User {
  id?: number;
  createTime: string;
  title: string;
  author: string;
  status: string;
  type: string;
  ing: string;
}

// 表单
const form: User = reactive({
  title: "",
  author: "",
  status: "",
  createTime: "",
  desc: "",
  type: "",
  ing: "",
});

// 数据
const list = reactive({
  tableData: [],
});

// 评论数据
const pllist = reactive({
  pl: [],
});

// 待修改的id
const editid = ref(0);

// 待删除的id
const delid = ref(0);

// 待删除评论的id
const plid = ref(0);

onMounted(() => {
  render();
});

const id: any = route.params.id;

// 渲染
const render = () => {
  getlistdetail(id).then((res) => {
    list.tableData = res.data.data[0];
  });
  getcommentlist().then((res) => {
    if (res.data.data.lenght == 0) {
    }
    pllist.pl = res.data.data;
  });
};

// 点击评论执行的函数
const add = () => {
  console.log(list.tableData.author);
  addpl(list.tableData.author, input.value).then((res) => {
    if (res.data.code == 1) {
      render();
    }
  });
};

// 点击删除评论执行的函数
const delpllist = (id) => {
  plid.value = id;
  ElMessageBox.confirm("确定删除这一条评论?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delpl(plid.value).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          render();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 点击修改任务执行的函数
const editlist = () => {
  editid.value = id;
  dialogFormVisible.value = true;
  form.title = list.tableData.title;
  form.author = list.tableData.author;
  form.type = list.tableData.type;
  form.ing = list.tableData.ing;
  form.status = list.tableData.status;
  form.createTime = list.tableData.createTime;
};

// 点击删除执行的函数
const dellist = () => {
  delid.value = id;
  ElMessageBox.confirm("确定删除这一项任务?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delList(delid.value).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          flog.value = 1;
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 点击确定执行的函数
const edit = () => {
  let obj = {
    editid: editid.value,
    ...form,
  };
  geteditlist(obj).then((res) => {
    if (res.data.code == 1) {
      render();
    }
  });
  dialogFormVisible.value = false;
};

const size = ref("");
const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  };
});

const blockMargin = computed(() => {
  const marginMap = {
    large: "32px",
    default: "28px",
    small: "24px",
  };
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  };
});

// 时间
const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.box {
  margin: 20px;
  position: relative;
  /* width: 97%; */
  height: 93vh;
}
.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.left {
  float: left;
  padding-left: 20px;
  padding-top: 10px;
}
.name {
  float: left;
  margin-left: 10px;
  margin-top: 20px;
}
.delpl {
  float: right;
  margin-top: 20px;
  margin-right: 30px;
}
.pl {
  overflow: hidden;
  background-color: #f9f9f9;
  margin-top: 20px;
}
.shang {
  overflow: hidden;
}
.content {
  margin-top: -10px;
  padding-left: 20px;
  color: #979797;
}
.el-input {
  width: 96.2%;
}
.plbtn {
  width: 3.8%;
}
.bottom {
  width: 100% !important;
  position: absolute;
  bottom: 0px;
  margin-top: 20px;
}
</style>
